Ücretsiz bir CSS framework’u olan Bootstrap, açık kaynak kodlu bir tasarım aracıdır. Telefon, tablet ve masaüstü bilgisayarlar için farklı ve cihazınızın büyüklüğüyle orantılı şekilde sitenizin görünmesini sağlayan tema ve tasarımları kolaylıkla yapabilirsiniz. Bir site için gerekli olan bütün unsurları içerisinde barındıran Bootstrap ile tasarım yaparken bu hazır unsurları kullanarak tüm cihazlara uygun tasarımlar yapmanızı sağlar. Bu da demek oluyor ki, her şeyi hazır olan kodlarla yeni bir tasarım yaratmak oldukça kolay ve pratiktir. Stiller, imajlar ve JavaScript'ler daha öncesinden Bootstrap'in içine monte edilmiştir. Yapmanız gereken tek şey bunları çağırmanızdır. Bootstrap'in son sürümü olan Bootstrap 3, Chrome, Safari, Firefox, Internet Explorer, Opera gibi neredeyse her internet tarayıcısının son sürümlerinden sorunsuz şekilde çalışıyor.

Bootstrap'in Kullanım Alanları

Bir internet sitesi yaratmak için gerekli olan bütün elementleri içerisinde barındıran Bootstrap ile bir siteyi komple bir bütün olarak tasarlayabilirsiniz. Tipografik ögeler, carousel, tablolar, slider, imajlar, dropdown menüler, modal pencereler, navigasyon bar, butonlar, sayfalandırma, thumbnaili uyarı, etiketler ve yükleme barları, bilgilendirme balonları vb. gibi kullanıcılara hazır olarak sunulmuş. Sizin yapmanız gereken tek şeyse ihtiyacınız olan kodu kopyalayıp yapıştırmak.

Bootstrap Nasıl Kullanılır?

Bootstrap hazır bir sistem olduğu için her şeyi kopyalayıp yapıştırarak halledebilirsiniz. Fakat, öncelikle dosyanız için mutlaka yapmanız gereken şeyler var. Örneğin; sayfanız Html5 olmalı ve Bootstrap için CSS dosyası ile jquery scriptini sayfaya mutlaka eklemelisiniz. Sayfanızda kullanacağınız tüm ögeler için referansınız getbootstrap.com adresi olacak. Siteye giriş yaptığınız üst menüde yer alan Getting Started, CSS, Component ve JavaScript alanlarında sizin için gerekli olan kodları kopyalayıp yapıştıracaksınız.

Bootstrap'in temel tasarım mantığı, bir satırın 12 sütuna bölünmesi ve bu sütunların farklı genişlikteki cihazlara göre daraltılıp esnetilebilmesinden oluşuyor. Böylece bu sütunların farklı cihazlarda görüntülenme şekilleri de değiştirilebiliyor. Örnek verecek olursak, geniş ekranlı bir cihaz için üçlü sütun yapısı düşünüyorsunuz. Bootstrap'in sunduğu 12'ye ayrılan satırı dörderli sütunlar halinde böldüğünüz takdirde üçlü sütun yapısını oluşturabilirsiniz.

Farklı cihazlarda sütunların farklı şekilde davranmasını istediğiniz takdirde kullanılacak cihaza göre sütunların davranması gerektiği şekilde aynı class etiketi içerisine bu genişlikleri birlikte yazabilirsiniz. Örneğin; masaüstü bilgisayarlar için .col-md-3 class’ı ile dörde böldüğünüz satırların tabletlerde iki adet ikili sütun şeklinde görünmesini isteyebilirsiniz. Yani masaüstü bilgisayarda dörtlü sütun olarak görünen satır, tabletlerde iki satıra dönüştürülüp her bir satırda ikili sütun görünecek şekilde davranmasını sağlayabilirsiniz.

bootstrap-3.0.1-dist.zip dosyası, sayfanız için mutlak suretle gerekli olan dosyaları barındırıyor. bootstrap-3.0.1.zip dosyasında ise Bootstrap'in bütün dosyalarını bulabilirsiniz. Eğer ana şablonu oluşturmakla uğraşmak istemiyorsanız, indireceğiniz dosyaların içerisinde örnek sayfalar bulunuyor. Bu örnek sayfaları kendi şablonunuz olarak kullanabilirsiniz. Tasarımları yaparken de bu örnek sayfalara sıklıkla başvuracaksınız.

Bootstrap ile Sayfa Kurulumu

Tasarlayacağımız örnek sitenin en üstünde header alanında ana menü, altında carousel, onun altında üçlü sütundan bir alan, onun da altında footer yer alsın. İlk olarak bootstrap-3.0.1-dist.zip ve bootstrap-3.0.1.zip dosyalarını zipten çıkarıp, Examples klasöründe bulunan Navbar’daki örneği şablon şeklinde kullanmak için index.html dosyasını kopyalayıp bootstrap-3.0.1-dist klasörünün içine yapıştıralım. Ancak ilk açıldığında tasarım düzgün olarak görünmeyecektir. Bunun nedeni, CSS dosyasının linkinin doğru yerde olmaması. Kopyaladığımız index.html içindeki CSS ile Bootstrap js dosyalarının, iki üst klasörde olduğunu tanımlayan kısmı silerek kaydediyoruz. Artık dosya açıldığında şablon görünüyor. Header alanı da hazır. .jumbotron divi ise gerekli olmadığı için siliyoruz. Devam eden işlemde getbootstrap.com adresine giderek JavaScript bölümünden carousel kısmı için gerekli scripti kopyalıyoruz ve sayfamızda görünmesini istediğimiz yere yapıştırıyoruz.

Carousel'de bulunan her bir slide kod, aşağıda yer alan kısmın içerisine yerleştirilmeli. Bunun anlamı ise her bir slide için aşağıda bulunan kodu çoğaltmamız gerektiği. Temel düzeyde html bilgisine sahipseniz, bu düzenlemeleri kolaylıkla yapabilirsiniz. Aktif slide için gerekli olan .active classı yalnızca ilk slide divinde bulunmalıdır, diğerlerinden silmeniz gerekir. Buna ek olarak, imajlar için dosya yolunu ve slide içerisinde kullanılacak metni kod üzerinde düzenlemelisiniz.

Sırada üçlü sütun ekleme işlemi var. Bunun için Bootstrap'in resmi sitesine gidiyoruz ve Components > Thumbnail > Custom Content kodunu kopyalayıp yapıştırıyoruz. Üçlü sütun yapmak istediğimiz için row div'ini içerisinde yer alan div'i çoğaltıyoruz. Böylelikle üçlü sütunu da sitemize eklemiş olduk.

Sitenin tamamlanması için yapmamız gereken tek şey footer alanını eklemek. Bunun için, daha önceden indirdiğimiz Examples klasörünün içerisinde bulunan Sticky Footer klasöründeki kodu kopyalıyoruz ve sayfamızda görünmesini istediğimiz yere yapıştırıyoruz. Artık sayfamız hazır.

Siz de çok kısa bir sürede, Bootstrap sayesinde sitenizi tasarlayabilirsiniz. Yalnız Bootstrap'te dikkat etmeniz gereken çok önemli bir konu var. İmajların en - boy ölçüleri asla yazılmıyor. Bootstrap, imaj ölçülerine responsive olacak şekilde kendisi yönetiyor ve hazırladığınız siteye göre kendisi büyütüp küçültüyor.